<script setup lang="ts">
import { reactive, ref } from 'vue'
import {
  ElDialog,
  ElInput,
  ElButton,
  ElForm,
  ElRow,
  ElCol,
  ElFormItem,
  ElRadioGroup,
  ElRadio,
  FormInstance
} from 'element-plus'
import DeptTreeSelect from '@/views/System/compoents/DeptTreeSelect.vue'
import RoleSelect from '@/views/System/compoents/RoleSelect.vue'
import type { UserResponse } from '@/api/department/types'
import { saveUserApi, updateUserApi } from '@/api/department'

const form = reactive({
  id: '',
  name: '',
  nickName: '',
  phone: '',
  status: 1,
  deptId: '',
  roleId: ''
})

const dialogVisibleValue = ref(false)

const rules = reactive({
  name: {
    required: true,
    message: '不能为空',
    trigger: 'blur'
  }
})

const formRef = ref<FormInstance>()

const onSubmit = async (formEl: FormInstance | undefined) => {
  console.log(form)
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    console.log(fields)
    if (valid) {
      if (form.id) {
        updateUserApi(form)
      } else {
        saveUserApi(form)
      }
      dialogVisibleValue.value = false
    }
  })
}

const onAdd = (value: boolean) => {
  dialogVisibleValue.value = value
  form.id = ''
  form.name = ''
  form.nickName = ''
  form.phone = ''
  form.status = 1
  form.deptId = ''
  form.roleId = ''
}

const onUpdate = (value: boolean, data: UserResponse) => {
  dialogVisibleValue.value = value
  form.id = data.id + ''
  form.name = data.name
  form.nickName = data.nickName
  form.phone = data.phone
  form.status = data.status
  form.deptId = data.deptId + ''
  form.roleId = data.roleId + ''
}

defineExpose({
  onSubmit,
  onAdd,
  onUpdate
})

const emit = defineEmits(['onClose'])

const onOpen = () => {}
const onOpened = () => {}
const onClose = () => {}
const onClosed = () => {
  emit('onClose', 'aaa', 'bbb')
}
</script>

<template>
  <el-dialog
    v-model="dialogVisibleValue"
    title="用户信息"
    width="600"
    :draggable="true"
    :close-on-click-modal="false"
    @open="onOpen"
    @opend="onOpened"
    @close="onClose"
    @closed="onClosed"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="auto" label-position="top">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="用户名" prop="name">
            <el-input v-model="form.name" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="昵称">
            <el-input v-model="form.nickName" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="手机">
            <el-input v-model="form.phone" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio :value="0">禁用</el-radio>
              <el-radio :value="1">启用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="部门">
            <DeptTreeSelect v-model="form.deptId" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="角色">
            <RoleSelect v-model="form.roleId" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col>
          <el-form-item>
            <el-button type="primary" @click="onSubmit(formRef)">保存</el-button>
            <el-button @click="dialogVisibleValue = false">取消</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
